<template>
	<view class="cartmian">
		<view class="mianbox">
			<view class="mianleft">
				<view
					class="iconfont "
					:class="collshow ? 'icon-icon-test56' : 'icon-icon-test57'"
					@tap="Tapcollect"
				>
					<text>收藏</text>
				</view>
				<view class="iconfont icon-icon-test10" @tap="TapClickto">
					<text>购物车</text>
					<text class="abtext" v-show="selectnum !== 0">
						{{ selectnum }}
					</text>
				</view>
			</view>
			<view class="mianright">
				<view @tap="Tapadd">加入购物车</view>
				<view @tap="Tapadd">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { getcarts } from '@/http/api.js';
let iconfont = ref(true);
const { proxy } = getCurrentInstance();
const emit = defineEmits(['addcart', 'collect', 'subswitcart']);
import { useStore } from 'vuex'; // 引入useStore 方法
const store = useStore(); // 该方法用于返回store 实例
const props = defineProps({
	selectnum: {
		type: Number,
		default: 0
	},
	collshow:{
		type:Boolean,
	default: true
	} 
});
const TapClickto = () => {
	emit('subswitcart')
	// uni.switchTab({
	// 	url: '/pages/cart/cart',
	// 	complete: () => {
	// 		proxy.islogin.islogin();
	// 		getcarts().then(res => {
	// 			store.commit('qi_cart/GETCARTDATA', res.data);
	// 		});
	// 	}
	// });
};
const Tapsubmin = () => {};
const Tapadd = () => {
	emit('addcart');
};
const Tapcollect = () => {
	iconfont.value = !iconfont.value;
	emit('collect', !props.collshow);
};
</script>

<style lang="scss">
.cartmian {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	height: 50px;
	.mianbox {
		display: flex;
		.mianleft {
			display: flex;
			view {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 50px;
				height: 50px;
				font-size: 20px;
				text {
					font-size: 12px;
				}
			}
			.abtext {
				position: absolute;
				content: '';
				top: -2px;
				right: 10px;
				background-color: red;
				color: #fff;
				border-radius: 90px;
				width: 16px;
				height: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.mianright {
			display: flex;
			flex: 1;
			color: #fff;
			// height: 40px;
			margin: 5px 0;
			line-height: 40px;
			text-align: center;
			font-size: 14px;
			view:first-child {
				width: 50%;
				border-top-left-radius: 90px;
				border-bottom-left-radius: 90px;
				background-color: pink;
			}
			view:last-child {
				width: 50%;
				border-top-right-radius: 90px;
				border-bottom-right-radius: 90px;
				background-color: red;
			}
		}
	}
}
</style>
